<template>
	<div id="ServerAlarmLog" ref="ServerAlarmLog" class="ServerAlarmLog">
		<el-table :header-cell-style="{
                background:'rgb(2, 16, 51)',
                color:'aliceblue',
                border:'0px',
                'text-align':'center',
                padding:'0px 0px 0px 0px',
                'box-shadow': '0px 0px 30px  rgb(1, 40, 107) inset'}" :cell-style="{
                background:'rgb(2, 16, 51)',
                color:'aliceblue',
                border:'0px',
                'text-align':'center',
                padding:'0 0 0 0'}" :data="tableDataFn" height="100%" style="width: 100%">
			<el-table-column type="index" width="50">
			</el-table-column>
			<template v-for="(item) in tableColumns">
				<el-table-column :prop="item.prop" :label="item.label" align="center" :width="item.width"
					:key="item.prop">
					<template v-slot="scope">
						<template v-if="item.format == 'ALERT_LEVEL'">
							<div style="text-align: center">
								<el-tag :type="scope.row.levelType" disable-transitions size="mini" effect="dark">
									{{scope.row[item.prop]}}
								</el-tag>
							</div>
						</template>
						<template v-else>
							<div>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>
	</div>
</template>

<script>
	import {
		fetchData
	} from '@/api/index.js';
	import bus from 'common/bus.js';
	import tableColumns from './ServerAlarmLogTableColumns.js';


	export default {
		data() {
			return {
				postData: {
					opera: 'osalertlist',
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: '',
						sortOrders: ''
					},
					filtersType: 'fuzzyquery',
					filters: {
						"monid": ""
					},
				},
				tableData: [],
				tableColumns: tableColumns,
				timerName: 'ServerAlarmLog',
				timerEventName: 'timerServerAlarmLog',
				timerInterval: 1000 * 60,
				selectedMonID: {}
			}
		},
		created() {
			bus.$on('selectedMonIDServer', msg => {
				this.resetData();

				this.selectedMonID = msg;
				this.postData.filters.monid = this.selectedMonID.selectedOSMonID;
				this.getData();
			});

			bus.$emit('timerNewTodo', {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0
			});

			bus.$on(this.timerEventName, msg => {
				if (msg.isGetData) {
					// this.resetData();

					this.getData();
				}
			});

		},
		mounted() {
			setInterval(()=>{
				this.getData()
			},10000)
		},
		computed: {
			tableDataFn() {
				return this.tableData.filter((item) => {
					switch (item.ALERT_LEVEL) {
						case 1:
							item.ALERT_LEVEL = '提醒';
							item.levelType = 'info';
							break;
						case 2:
							item.ALERT_LEVEL = '普通';
							item.levelType = 'warning';
							break;
						case 3:
							item.ALERT_LEVEL = '紧急';
							item.levelType = 'danger';
							break;

						default:
							break;
					}

					return item;
				});
			}
		},
		methods: {
			getData() {
				fetchData({
					postData: JSON.stringify(this.postData)
				}).then((res) => {
					console.log('告警',res)
					this.tableData = res.data;
				});
			},
			resetData() {
				this.tableData = [];
			}
		},
		beforeDestroy() {
			bus.$emit('timerNewTodo', {
				name: this.timerName
			});
		},
		watch: {

		}
	}
</script>

<style scoped>
	.ServerAlarmLog {
		height: calc(100% - 8px - 22px);
	}

	.ServerAlarmLog>>>.el-table::before {
		height: 0px !important;
	}

	.ServerAlarmLog>>>.el-table tr {
		background-color: rgba(1, 40, 107, 0) !important;
	}

	.ServerAlarmLog>>>.el-table {
		background: rgb(2, 16, 51);
	}

	.ServerAlarmLog>>>.el-table__body-wrapper::-webkit-scrollbar {
		width: 6px;
		height: 6px;
	}

	.ServerAlarmLog>>>.el-table__body-wrapper::-webkit-scrollbar-thumb {
		background-color: rgba(4, 44, 119, 0.7);
		border-radius: 3px;
	}
</style>
